<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      loosing-text="松开即可刷新"
      loading-text="正在刷新数据中"
    >
      <div class="times">{{time}}</div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-grid :gutter="10" :column-num="3" square>
          <van-grid-item v-for="(item,i) of picList" :key="i" class="imgSize">
            <img class="lazy" @click="preview(i)" v-lazy="item.thumb" />
          </van-grid-item>
        </van-grid>
      </van-list>
    </van-pull-refresh>
    <div style="height:50px;"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      isLoading: false,
      time: new Date().format("最后更新:" + "今天 " + "hh:mm"),
      picList: [],
      loading: false,
      finished: false,
      l: 0
    };
  },
  methods: {
    preview(id) {
      this.previews(this.picList, "thumb", id);
    },
    onRefresh() {
      setTimeout(() => {
        this.l += 60;
        this.time = new Date().format("最后更新:" + "今天 " + "hh:mm");
        this.$toast("刷新成功");
        this.isLoading = false;
        this.getPicData(this.l, data => {
          if (data.code == 0) {
            this.picList = data.res.avatar;
          }
        });
      }, 500);
    },
    async getPicData(limit, fn) {
      let { data } = await this.axios.get(
        `?url=http%3a%2f%2fservice.avatar.adesk.com%2fv1%2favatar%2favatar%3fadult%3d0%26first%3d1%26limit%3d30%26order%3dhot%26skip%3d${limit}`
      );
      fn(data);
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        this.l += 60;
        this.getPicData(this.l, data => {
          if (data.code == 0) {
            this.picList = this.picList.concat(data.res.avatar);
            this.loading = false;
          }
        });
      }, 500);
    }
  },
  mounted() {
    this.l = parseInt(Math.random() * 100);
    this.getPicData(this.l, data => {
      if (data.code == 0) {
        this.picList = data.res.avatar;
      }
    });
  }
};
</script>
<style scoped>
.times {
  font-size: 14px;
  margin-top: -39px;
  color: #969799;
  margin-bottom: 30px;
}
</style>